<div>
  <h1 mat-dialog-title style="display:inline-block" mat-dialog-draggable>{{'dlg.docname-title' | translate}}</h1>
  <mat-icon (click)="onNoClick()" style="float:right;margin-right:-10px;margin-top:-10px;cursor:pointer;color:gray;">clear</mat-icon>
  <div mat-dialog-content>
    <div class="my-form-field" style="display: block;margin-bottom: 10px;">
        <span>{{'dlg.docname-name' | translate}}</span>
        <input [(ngModel)]="data.name" type="text" width="100%" [readonly]="data.readonly">
    </div>
    <!-- <div style="display: grid; margin-bottom: 20px;">
      <input [(ngModel)]="data.name" type="text" width="100%" [readonly]="data.readonly">
    </div> -->
  </div>
  <div mat-dialog-actions style="float:right; margin-bottom:0px;padding-bottom:0px">
    <button mat-raised-button (click)="onNoClick()">{{'dlg.cancel' | translate}}</button>
    <button mat-raised-button [disabled]="!isValid(data.name)" color="primary" [mat-dialog-close]="data" cdkFocusInitial>{{'dlg.ok' | translate}}</button>
  </div>
</div>